<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例method方式实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  姓：<input type="text" v-model="firstName"/><br/>
  名：<input type="text" v-model="lastName"/><br/>
  <!--通过插值语法将函数表达式插入到这里-->
  全名：{{fullName()}}
</div>
</body>
<script type="text/javascript">
  var vm = new Vue({
    el:'#root',
    /*data中的数据不管哪个数据发生了变化，Vue的模板就会重新解析一次*/
    data:{
      firstName:'张',
      lastName:'三'
    },
    methods:{
      fullName(){
        /*this 是Vue实例*/
        return this.firstName.slice(0,3) + '-' + this.lastName;
      }
    }
  })
</script>
</html>